<template>
  <div>
    <nav class="nav_box">
      <div class="selectBox">
        <el-select v-model="service1" placeholder="请选择服务大类" clearable>
          <el-option
            v-for="(item,index) in serviceArr"
            :key="index"
            :label="item.text"
            :value="item.text">
          </el-option>
        </el-select>
        <el-select v-model="service2" placeholder="请选择服务小类" clearable>
          <el-option
            v-for="item in serviceArrChildren"
            :key="item.id"
            :label="item.text"
            :value="item.text">
          </el-option>
        </el-select>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <el-button type="primary" @click="dialogVisible = true">我的接单</el-button>

      <el-dialog
        title="我的接单"
        :visible.sync="dialogVisible"
        width="86%"
      >
        <custom-table
          :data="personalTable.data"
          :total="personalTable.total"
          :currentPage="personalTable.currentPage"
          :pageSize="personalTable.pageSize"
          :border="personalTable.border"
          :columns="personalTable.columns"
          :layouts="personalTable.layouts"
          :paginationStyle="personalTable.paginationStyle"
          :defaultSort="personalTable.defaultSort"
          @handleCurrentChange="handleCurrentChange2"
        >

        </custom-table>
      </el-dialog>      
    </nav>
    

    <custom-table 
      :data="table.data"
      :total="table.total"
      :currentPage="table.currentPage"
      :pageSize="table.pageSize"
      :border="table.border"
      :columns="table.columns"
      :layouts="table.layouts"
      :paginationStyle="table.paginationStyle"
      :defaultSort="table.defaultSort"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:operation="scope">
        <el-popconfirm
          title="确认接该订单吗？"
          @confirm="confirmReceive(scope.row)"
        >
          <el-button slot="reference" size="mini" type="primary">接单</el-button>
        </el-popconfirm>
      </template>
    </custom-table>
  </div>
</template>

<script>
import CustomTable from "@/components/customTable/index.vue"

export default {

  data() {
    return {
      table:{
        data:[],
        total:0,
        currentPage:1,
        pageSize:5,
        border:true,
        layouts:[ 'prev, pager, next, jumper','total, sizes'],
        paginationStyle:"display:flex;justify-content: space-between;",
        defaultSort:{prop:'appointmentTime',order:'descending'},
        columns:[
          {
            type:"index",
            label:"序号",
            index:(index)=>(index+1) + (this.table.currentPage - 1) * this.table.pageSize,
            width:"50px"
          },
          {
            prop:"service",
            label:"维修服务",
          },
          {
            prop:"appointmentTime",
            label:"预约时间",
            sortable:true
          },
          {
            prop:"createdTime",
            label:"业主下单时间",
            sortable:true
          },
          {
            prop:"notes",
            label:"业主备注"
          },
          {
            slot:true,
            label:"操作",
            name:"operation"
          }
        ]
      },
      personalTable:{
        data:[],
        total:0,
        currentPage:1,
        pageSize:5,
        border:true,
        layouts:[ 'prev, pager, next, jumper','total, sizes'],
        paginationStyle:"display:flex;justify-content: space-between;",
        defaultSort:{prop:'receiveTime',order:'descending'},
        columns:[
          {
            type:"index",
            label:"序号",
            index:(index)=>(index+1) + (this.table.currentPage - 1) * this.table.pageSize,
            width:"50px"
          },
          {
            prop:"receiveTime",
            label:"接单时间",
            sortable:true,
          },
          {
            prop:"service",
            label:"维修服务",
          },
          {
            prop:"orderer",
            label:"业主名"
          },
          {
            prop:"contactNumber",
            label:"业主联系电话"
          },
          {
            prop:"targetLocation",
            label:"业主地址"
          },
          {
            prop:"appointmentTime",
            label:"业主预约时间"
          },
          {
            prop:"notes",
            label:"业主备注"
          },
          {
            prop:"state",
            label:"订单状态"
          },
        ]
      },
      serviceArr:[
        {
          text:"家电维修",
          children:[
            {
              id:1,
              text:"空调"
            },
            {
              id:2,
              text:"冰箱"
            },
            {
              id:3,
              text:"洗衣机"
            },
            {
              id:4,
              text:"电视"
            },
            {
              id:5,
              text:"热水器"
            },
            {
              id:6,
              text:"油烟机"
            },
            {
              id:7,
              text:"燃气灶"
            },
          ]
        },
        {
          text:"家电清洗",
          children:[
            {
              id:1,
              text:"空调"
            },
            {
              id:2,
              text:"冰箱"
            },
            {
              id:3,
              text:"洗衣机"
            },
            {
              id:4,
              text:"油烟机"
            }
          ]
        },
        {
          text:"数码办公",
          children:[
            {
              id:1,
              text:"打印机"
            },
            {
              id:2,
              text:"电脑"
            }
          ]
        },
        {
          text:"家电安装",
          children:[
            {
              id:1,
              text:"空调"
            },
            {
              id:2,
              text:"冰箱"
            },
            {
              id:3,
              text:"电视"
            }
          ]
        },
      ],
      serviceArrChildren:[],
      service1:"",
      service2:"",
      dialogVisible:false,
      currentOrder:{}
    }
  },
  watch:{
    service1(val){
      let isNull = true
      let children
      for (const iterator of this.serviceArr) {
        if (iterator.text == val) {
          isNull = false
          children = iterator.children
          break 
        }
      }

      if(isNull){
        this.serviceArrChildren = []
      }else{
        this.serviceArrChildren = children
      }
    }
  }, 
  methods: {
    getRepairList(){
      this.$API.repair.getList(this.table.currentPage,this.table.pageSize).then(res=>{
        if(res.code == 200){
          this.table.data = this.formatData(res.data) 
          this.table.total = res.total
        }
      })
    },
    getPersonalRepairList(){
      let {_id} = this.$store.state.userInfo

      this.$API.repair.getPersonalList(_id,this.personalTable.currentPage,this.personalTable.pageSize).then(res=>{
        this.personalTable.data = this.formatData(res.data)
        this.personalTable.total = res.total
      })
    },
    formatData(data){
      let newData = data.map((item)=>{
        if(item.notes == ""){
          item.notes = "暂无数据"
        }

        return item
      })

      return newData
    },
    handleCurrentChange(val){
      this.table.currentPage = val
      this.getRepairList()
    },
    handleCurrentChange2(val){
      this.personalTable.currentPage = val
      this.getPersonalRepairList()
    },
    confirmReceive(row){
      console.log(row);
      let {_id} = row
      let userInfo = this.$store.state.userInfo
      let receiverInfo = {
        receiverId:userInfo._id,
        receiver:userInfo.name,
        receiverPhoneNumber:userInfo.phoneNumber
      }

      this.$API.repair.receiveOrder(_id,receiverInfo).then(res=>{
        this.getRepairList()
        this.getPersonalRepairList()
        this.dialogVisible = true
      }).catch(err=>{
        console.log(err);
      })
    },
    search(){
      if(this.service1 == ""){
        this.$message.info("查询条件为空")
      }else{
        let filterKey = this.service1

        if(this.service2 != ""){
          filterKey = this.service1 + " " + this.service2
        }

        this.$API.repair.getServiceFilterList(
          {
            currentPage:this.table.currentPage,
            pageSize:this.table.pageSize,
            service:filterKey
          }
        ).then(res=>{
          
          this.table.data = this.formatData(res.data) 
          this.table.total = res.total
        })
      }
    },
    reset(){
      this.service1 = ""
      this.service2 = ""

      this.getRepairList()
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },
  components:{CustomTable},
  created(){
    this.getRepairList()
    this.getPersonalRepairList()
  },
}
</script>

<style lang='less' scoped>
  .nav_box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .selectBox{
      display: flex;
      gap: 15px;
    }
  }
  
</style>